import React, {PureComponent} from 'react';
import {StyleSheet, View, Image, Text, ScrollView, TouchableWithoutFeedback, ActivityIndicator} from 'react-native';

export default class extends PureComponent {
    render() {
        const {imgList, shareImgUrl, checkImg} = this.props;
        const count = imgList.filter(item => item.checked).length;
        return (
            <View style={styles.container}>
                {
                    imgList.length ?
                        <View style={styles.slideWrap}>
                            <ScrollView horizontal={true}>
                                {
                                    imgList.map((item, index) =>
                                        <TouchableWithoutFeedback key={item.uri} onPress={() => {
                                            checkImg(index);
                                        }}>
                                            <View style={styles.slideItem}>
                                                <Image source={{uri: item.uri}} style={styles.slideImg}/>
                                                <Image
                                                    source={item.checked ? require('./img/icon_checked.png') : require('./img/icon_no_checked.png')}
                                                    style={styles.flag}/>
                                            </View>
                                        </TouchableWithoutFeedback>
                                    )
                                }
                            </ScrollView>
                            <Text style={styles.countText}>已选{count}张</Text>
                        </View>
                        : null
                }
                <View style={styles.shareImgWrap}>
                    {
                        shareImgUrl ? <Image source={{uri: shareImgUrl}} style={styles.shareImg}/> :
                            <ActivityIndicator size="small"/>
                    }
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        marginTop: 10
    },
    slideWrap: {
        backgroundColor: '#fff',
        borderRadius: 4,
        padding: 8,
        zIndex: 2
    },
    slideItem: {
        width: 86,
        height: 86,
        marginRight: 4
    },
    flag: {
        width: 20,
        height: 20,
        position: 'absolute',
        right: 2,
        top: 2
    },
    slideImg: {
        width: 86,
        height: 86
    },
    countText: {
        paddingTop: 6,
        fontSize: 12,
        letterSpacing: 2
    },
    shareImgWrap: {
        height: 450,
        paddingTop: 10,
        paddingBottom: 10,
        alignItems: 'center',
        justifyContent: 'center'
    },
    shareImg: {
        width: 240,
        height: 427,
        borderRadius: 4
    }
});
